<template>
    <div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="茶楼名" prop="productCategoryId">
                        <el-input v-model="form.name" placeholder="请输入茶楼名称"></el-input>
                    </el-form-item>
                    <el-form-item label="茶楼展示图">
                        <el-upload
                            :headers="myHeaders"
                            :action="uploadsrc"
                            accept="image/jpeg,image/gif,image/png"
                            list-type="picture-card"
                            :limit="1"
                            :class="img1.length > 0 ? 'hide' : ''"
                            :before-upload="handleBeforeUpload"
                            :on-success="uploadLogoSuccess"
                            :on-remove="handleRemove"
                            :on-error="uploadError"
                            :data="pdfData"
                            :file-list="img1"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="form.phone" placeholder="请输入茶楼联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="地址:">
                        <div class="map">
                            <el-input v-model="form.street" placeholder="请输入地址来直接查找相关位置" style="margin-bottom: 10px"></el-input>
                            <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
                            <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom是视图比例 -->
                            <baidu-map class="bmView" :scroll-wheel-zoom="true" @click="getLocationPoint" :ak="baiduak">
                                <bm-view style="width: 350px; height: 350px; flex: 1"></bm-view>
                                <bm-local-search :keyword="form.street" :auto-viewport="true" style="display: none"> </bm-local-search>
                            </baidu-map>
                        </div>
                    </el-form-item>
                    <el-form-item label="公告">
                        <el-input v-model="form.notice" placeholder="请输入公告"></el-input>
                    </el-form-item>
                    <el-form-item label="营业号">
                        <el-input v-model="form.businessLicenseNumber" placeholder="请输入公告"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照">
                        <el-upload
                            :headers="myHeaders"
                            :action="uploadsrc"
                            accept="image/jpeg,image/gif,image/png"
                            list-type="picture-card"
                            :limit="1"
                            :class="img2.length > 0 ? 'hide' : ''"
                            :before-upload="handleBeforeUpload"
                            :on-success="uploadLogoSuccess1"
                            :on-remove="handleRemove1"
                            :on-error="uploadError"
                            :data="pdfData"
                            :file-list="img2"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="商品介绍">
                        <quill-editor ref="myTextEditor" v-model="form.introduce" @change="introduceHtml"></quill-editor>
                    </el-form-item>
                    <el-form-item label-width="255px">
                        <el-button type="primary" @click="onSubmit">修改</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<!-- 功能实现 -->
<script>
import { BaiduMapAk } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';

import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import { fetchData } from '../../../api';
import { userList } from '@/api/api.js';
import { userUpdate } from '@/api/api.js';
import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
import md5 from 'js-md5';
const geturlkey = require('../../../utils/geturlkey');
// 富文本
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 10,
                param: {
                    name: '',
                    phone: '',
                    status: '',
                    id: ''
                }
            },
            pdfData: {
                type: 1,
                path: 1
            },
            myHeaders: {},
            baiduak: BaiduMapAk, //百度ak码
            pageTotal: 0,
            tableData: [],
            cate: [],
            form: {
                logo: []
            },
            address: '',
            uploadsrc: '',
            img1:[],
            img2:[]
        };
    },
    components: {
        BaiduMap
    },
    created() {
        this.uploadsrc = uploadsrc;
        this.query.param.id = geturlkey.getUrlKey('teaId');
        this.tablist();
    },
    methods: {
        //茶楼列表
        tablist() {
            teaHouseList(this.query).then((res) => {
                if (res.returnCode == 200) {
                    let arr = [];
                    let array = []
                    let data = {
                        url: res.data.list[0].logo 
                    };
                    let data1 = {
                        url: res.data.list[0].businessLicense 
                    };
                    arr.push(data);
                    array.push(data1)
                    this.img1 = arr;
                    this.img2 = array;
                    res.data.list[0].createTime = ''
                    res.data.list[0].updateTime = ''
                    this.form = res.data.list[0];
                } else {
                    this.$message.error('查询茶楼详情失败:' + res.returnMsg);
                }
            });
        },
        onSubmit() {
            teaUpdate(this.form).then(res => {
                if (res.returnCode === 200) {
                    this.$message.success("修改成功");
                    setTimeout(res=>{
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    },1500)
                }
            }, err => {
                this.$message.error("操作失败:"+err.returnMsg)
            });
        },
        introduceHtml({ editor, html, text }) {
            this.form.introduce = html;
        },
        getLocationPoint(e) {
            this.form.street = e.cb.Bb.cb.z.title
            this.form.longitude = e.point.lng; //经度
            this.form.latitude = e.point.lat; //纬度
        },
        handleimgtype(file) {
            if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                this.$notify.warning({
                    title: '警告',
                    message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                });
                return false;
            }
            let size = file.size / 1024 / 1024 / 2;
            if (size > 2) {
                this.$notify.warning({
                    title: '警告',
                    message: '图片大小必须小于2M'
                });
                return false;
            }
        },
        uploadError(){
            this.$message.error(`上传失败，请重新上传`);
        },
        handleRemove(file, fileList) {
            this.form.logo = [];
            this.img1 = []
        },
        handleRemove1(file, fileList) {
            this.form.businessLicense = [];
            this.img2=[]
        },
        uploadLogoSuccess(data) {
            if (data.returnCode == 200) {
                this.form.logo = data.data;
                this.img1 = data.data
            } else {
                this.$message.error(`上传失败，请重新上传`);
            }
        },
        uploadLogoSuccess1(data) {
            if (data.returnCode == 200) {
                this.form.businessLicense = data.data;
                this.img2 = data.data
            } else {
                this.$message.error(`上传失败，请重新上传`);
            }
        },
        cancel() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        },
        getmyHeaders() {
            var dHeader = dynamicHeader();
            this.myHeaders.signature = dHeader.signature;
            this.myHeaders.nonce = dHeader.nonce;
            this.myHeaders.timestamp = dHeader.timestamp;
            this.myHeaders.appkey = dHeader.appkey;
            this.myHeaders.token = dHeader.token;
        },
        handleBeforeUpload(file) {
            this.handleimgtype(file);
            this.getmyHeaders();
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.tablist();
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.tablist();
        }
    }
};
</script>

<!-- css样式实现 -->
<style>
.hide .el-upload--picture-card {
    display: none;
}
</style>
